﻿@page "/bullet-chart/customization"
@using Syncfusion.Blazor.Charts
@using Syncfusion.Blazor.Inputs
@using Syncfusion.Blazor.Buttons
@using Newtonsoft.Json.Linq;
@inject NavigationManager NavigationManager
@using Syncfusion.Blazor
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample illustrates a bullet chart with different customization for ranges and labels in bullet chart.</p>
</SampleDescription>
<ActionDescription>
    <p>Tooltip is enabled in this example, to see the tooltip in action, hover a feature bar or comparative bar on the bullet chart.</p>
</ActionDescription>

<div class="row">
    <div class="control-section col-md-8">
        <SfBulletChart DataSource="@BulletChartData" Theme="@theme" ValueField="value" TargetField="target" Minimum="0" Maximum="3"
                       Interval="0.5" Title="Package Downloads" Subtitle="in Thousands">
            <BulletChartTooltip TValue="ChartData" Enable="true"></BulletChartTooltip>
            <BulletChartMinorTickLines Width="0"></BulletChartMinorTickLines>
            <BulletChartRangeCollection>
                <BulletChartRange End="1.5" Color="@rangeColor0"> </BulletChartRange>
                <BulletChartRange End="2.5" Color="@rangeColor1"></BulletChartRange>
                <BulletChartRange End="3" Color="@rangeColor2"></BulletChartRange>
            </BulletChartRangeCollection>
        </SfBulletChart>
    </div>
    <div class="col-md-4 property-section">
        <table style="width: 100%">
            <tr style="height:50px"><th>Properties</th></tr>
            <tr style="height: 50px">
                <td style="width: 60%">
                    <div>Start Color:</div>
                </td>
                <td style="width: 40%;">
                    <div align="center">
                        <SfColorPicker Value="@rangeColor0" Mode="ColorPickerMode.Palette" ValueChange="StartColor"></SfColorPicker>
                    </div>
                </td>
            </tr>
            <tr style="height: 50px">
                <td style="width: 60%">
                    <div>Middle Color:</div>
                </td>
                <td style="width: 40%;">
                    <div align="center">
                        <SfColorPicker Value="@rangeColor1" Mode="ColorPickerMode.Palette" ValueChange="MiddleColor"></SfColorPicker>
                    </div>
                </td>
            </tr>
            <tr style="height: 50px">
                <td style="width: 60%">
                    <div>End Color:</div>
                </td>
                <td style="width: 40%;">
                    <div align="center">
                        <SfColorPicker Value="@rangeColor2" Mode="ColorPickerMode.Palette" ValueChange="EndColor"></SfColorPicker>
                    </div>
                </td>
            </tr>
        </table>
    </div>
</div>

@code{

    private string rangeColor0 { get; set; } = "#599C20";
    private string rangeColor1 { get; set; } = "#EFC820";
    private string rangeColor2 { get; set; } = "#CA4218";

    public GetCurrentValue ColorValue { get; set; }
    public class GetCurrentValue
    {
        public string hex { get; set; }
    }
    public void StartColor(ColorPickerEventArgs args)
    {
        this.rangeColor0 = args.CurrentValue.Hex;
    }

    public void MiddleColor(ColorPickerEventArgs args)
    {
        this.rangeColor1 = args.CurrentValue.Hex;
    }

    public void EndColor(ColorPickerEventArgs args)
    {
        this.rangeColor2 = args.CurrentValue.Hex;
    }

    public class ChartData
    {
        public double value { get; set; }
        public double target { get; set; }
    }
    public List<ChartData> BulletChartData = new List<ChartData>
{
        new ChartData { value = 1.7, target = 2.5 }
    };

    private string CurrentUri;
    private Theme theme { get; set; }
    protected override void OnInitialized()
    {
        CurrentUri = NavigationManager.Uri;
        if (CurrentUri.IndexOf("material") > -1)
        {
            theme = Theme.Material;
        }
        else if (CurrentUri.IndexOf("fabric") > -1)
        {
            theme = Theme.Fabric;
        }
        else if (CurrentUri.IndexOf("bootstrap") > -1)
        {
            theme = Theme.Bootstrap;
        }
        else if (CurrentUri.IndexOf("highcontrast") > -1)
        {
            theme = Theme.HighContrast;
        }
        else if (CurrentUri.IndexOf("tailwind") > -1)
        {
            theme = Theme.Tailwind;
        }
        else
        {
            theme = Theme.Bootstrap4;
        }
    }
}
